<template>
    <div class="main-qiandao">
        <div class="main-left">
            <video src="../../../../public/img/签到.mp4" autoplay loop width="350" height="350"></video>
        </div>
        <div class="main-right">
            <div class="right-title">签到排行榜</div>
            <dv-scroll-board :config="config" style="width:500px;height:220px" />
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            config: {
                header: ['用户名', '总签到天数'],
                data: [
                    ['way', '999天'],
                    ['糖心', '812天'],
                    ['范儿', '810天'],
                    ['烈火青春', '795天'],
                    ['错行', '783天'],
                    ['也许没有也许', '779天'],
                    ['青椒不辣', '763天'],
                    ['水云间', '759天'],
                    ['成年美酒', '745天'],
                    ['兔兔伯爵', '732天']
                ],
                index: true,
                indexHeader:'NO.',
                rowNum:8,
                headerHeight:70,
                columnWidth: [100],
                align: ['center'],
                headerBGC:'#f5a819',
                oddRowBGC:'#eef0f0',
                evenRowBGC:'#a1c1ff'
            }
        }
    }
}
</script>
<style scoped>
body{
    width: 100%;
    height: 100vh;
}
.main-qiandao{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}
.main-left{
    width: 350px;
    height: 350px;
}

.main-right{
    display: flex;
    align-items: center;
    position: relative;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}
.right-title{
    position: absolute;
    top: 32px;
    left: -5px;
    width: 38px;
    font-size: 30px;
    padding-left: 8px;
    border-left: 2px solid #323377;
    border-top: 2px solid #323377;
    color: #000;
}
::v-deep .dv-scroll-board{
    width: 860px !important;
    height: 572px !important;
    margin: 0 auto;
    color: #000 !important;
}

</style>
